<template>
  <el-dialog :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false" :close-on-press-escape='false'
             title="提交审批" center>
    <el-form :model="form" ref="form" label-width="90px" :rules="rules">
      <el-form-item label="审批主题:" prop="approvalSubject">
        <el-input v-model="form.approvalSubject" size="small" placeholder="请输入审批主题"></el-input>
      </el-form-item>
      <el-form-item label="审批人:" prop="approvalUserId">
        <el-cascader size="small" :options="menuData" ref="cascader" @change="handleChange"
                     v-model="form.user" :show-all-levels="false"
                     :props="defaultProps">
        </el-cascader>
      </el-form-item>
      <el-form-item label="审批内容:">
        <p class="approval-content"><img src="../../../public/img/icon/approval2.png" alt="">
          <span class="more">{{email.emailSubject}}</span></p>
      </el-form-item>
      <el-form-item label="备注:">
        <el-input v-model="form.remark" type="textarea" :rows="5" size="small"></el-input>
      </el-form-item>
      <el-form-item label="附件:">
        <div v-show="form.file.length==0"><span class="el-icon-paperclip icon operation_icon"></span><a
          href="javascript:void(0)" class="addFile" @click="uploadText">添加附件</a></div>
        <MailFileWrite :list="[form.file]" @delText="delText" v-if="form.file!=''"></MailFileWrite>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" align="right">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" size="mini" @click="submit" :disabled="loading" :loading="loading">{{loading?'保存中':'确 定'}}</el-button>
    </div>
    <input type="file" @change="onChange" ref="fileTarget" hidden>
  </el-dialog>
</template>

<script>
    import {uploadText} from "@/api/mail/write";
    import MailFileWrite from '@/components/mail/file/MailFileWrite'
    import {submitApproval} from '@/api/approval'
    import {getTree} from '@/api/mail/make'
    import {mapGetters} from "vuex";
    export default {
        name: "DialogApproval",
        components: {MailFileWrite},
        data() {
            return {
                dialogVisible: false,
                form: {
                    approvalSubject: '',
                    approvalUserId: '',
                    user:'',
                    remark: '',
                    file: ''
                },
                rules: {
                    approvalSubject: [
                        {required: true, message: '请输入审批主题', trigger: 'blur'}
                    ],
                    approvalUserId: [
                        {required: true, message: '请选择审批人', trigger: 'blur'},
                    ]
                },
                menuData: [],
                defaultProps: {
                    children: 'children',
                    label: 'value',
                    value:'id'
                },
                email: {},
                loading:false
            }
        },
        computed:{
            ...mapGetters(["userInfo"])
        },
        created() {
            this.getTree();
        },
        methods: {
            init(row) {
                this.reset();
                this.email = row;
                this.email.emailContent = encodeURIComponent(row.emailContent);
                this.dialogVisible = true;
            },
            handleChange(val){
                this.form.approvalUserId=val[val.length-1]
            },
            submit() {
                //判断是否选择了定时发送
                if(this.email.emailSendTiming!=''){
                    this.$message({
                        message: '为了您更好的邮件体验，审批的邮件不能与定时发送同时使用!',
                        type: "success"
                    });
                    return;
                }
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading=true;
                        const params = {
                            approvalSubject: this.form.approvalSubject,//主题
                            approvalUserId: this.form.approvalUserId,//审批人
                            remark: this.form.remark,//备注
                            emailApprovalAccessoryList: this.form.file == '' ? [] : [{
                                accessoryUrl: this.form.file.fileGuid,
                                accessorySize: this.form.file.fileSize,
                                accessoryName: this.form.file.picName
                            }],//附件
                            emailInfoDTO: this.email//原邮件信息
                        }
                        submitApproval(params).then(res => {
                            this.loading=false;
                            if (res.data.success) {
                                this.$message({
                                    type: "success",
                                    message: res.data.msg
                                });
                                this.$emit('reset')
                                this.dialogVisible = false
                                this.$store.commit('SET_ISFRAG', 7);
                                this.$router.push('/mail/approval')
                            } else {
                                this.$message({
                                    type: "success",
                                    message: res.data.msg
                                });
                            }
                        }).catch(err => {  this.loading=false;
                        })
                    } else {
                        return false;
                    }
                });
            },
            getTree() {
                getTree().then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        this.dealTree(result);
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            dealTree(result) {
                if(result.length==0)return;
                result.map(item => {
                    if(this.userInfo.nick_name==item.value){
                         item.disabled=true;
                    }else {
                        if(item.hasOwnProperty('children')){
                            item.disabled = false;
                            this.dealTree(item.children);
                        }else if(item.type==1){
                            item.disabled = false;
                        }else{
                            item.disabled = true;
                        }
                    }
                })
                this.menuData = result;
            },
            reset() {
                this.form = {
                    approvalSubject: '',
                    approvalUserId: '',
                    remark: '',
                    file: ''
                }
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
            },
            //删除附件
            delText() {
                this.form.file = '';
            },
            //上传附件
            uploadText() {
                this.$refs.fileTarget.dispatchEvent(new MouseEvent('click'))
            },
            onChange(event) {
                this.upload(event.target.files[0])
            },
            //上传服务器
            upload(file) {
                let formData = new FormData();
                formData.append("file", file);
                if (file.size > 10485760) {//最大10M 文件
                    this.$message({
                        message: '附件大小最大不可超过10M，请选择其他文件上传',
                        type: "success"
                    });
                    return;
                }
                uploadText(formData).then(res => {
                    this.$message({message: res.data.msg, type: 'success'});
                    this.form.file = {
                        fileGuid: res.data.data[0].fileUrl,
                        fileSize: file.size,
                        picName: file.name,
                    }
                }).catch(err => {
                    console.log(err)
                })
                this.$refs.fileTarget.value = ''
            },
        }
    }
</script>

<style scoped lang="scss">
  .el-dialog {
    p.approval-content {
      display: flex;
      align-items: center;
      color: #44A3F8;
      font-size: 12px;

      span {
        max-width: 300px;
      }

      img {
        width: 20px;
        margin-right: 5px;
      }
    }

    span.el-icon-paperclip {
      margin-right: 5px;
    }

    a.addFile {
      font-size: 12px;
    }
  }

</style>
